class Banner {
	    constructor(newBox, newLis) {
	        this.box = newBox;
	        this.oLis = newLis;
	        this.index = 0;
			
	        this.box.style.backgroundImage = "url(img/banner" + this.index + ".jpg)";
	        this.oLis[this.index].style.backgroundColor = "skyblue";
	        this.eventBind();
	    }
	    setBgImage() {
	        this.box.style.backgroundImage = "url(img/banner" + this.index + ".jpg)";
	    }
	    setLiColor() {
	        for (let i = 0; i < this.oLis.length; i++) {
	            if (i == this.index) {
	                this.oLis[i].style.backgroundColor = "#007aff";
	            } else {
	                this.oLis[i].style.backgroundColor = "transparent";
	            }
	        }
	    }
	    prev() {
	        this.index--;
	        if (this.index == -1) {
	            this.index = this.oLis.length - 1;
	        }
	        this.setBgImage();
	        this.setLiColor();
	    }
	    next() {
	        this.index++;
	        if (this.index == this.oLis.length) {
	            this.index = 0;
	        }
	        this.setBgImage();
	        this.setLiColor();
	    }
	    eventBind() {
	        let that = this;
			let time = null;
	        for (let i = 0; i < this.oLis.length; i++) {
	            this.oLis[i].onclick = function() {
	                that.index = i;
	                that.setLiColor();
	                that.setBgImage();
	            }
	        }
	        window.onload = function() {
	            let time = setInterval(function() {
	                that.next();
	            }, 2000);
	            that.box.onmouseover = function() {
	                clearInterval(time);
	            }
	            that.box.onmouseout = function() {
	                time = setInterval(function() {
	                    that.next();
	                }, 2000);
	            }
	        }
	    }
	
	}
	let obox = document.querySelector("#banner-con");
	let oLis = document.querySelectorAll(".li");
	let b = new Banner(obox, oLis);